<template>
  <el-menu
    class="el-menu-vertical-demo"
    :default-active="selectindex"
    @select="handleOpen"
    router
  >
      <template  v-for="(item, index) in menuData" :key="index"  >
        <el-sub-menu :index="item.id"   v-if="item.children?.length > 0">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            {{item.name}}
          </template>
            <template   v-for="node in item.children" :key="node.nodeId">
              <el-menu-item :index="node.path"  v-if="node.status == 1">{{ node.name }}</el-menu-item>
            </template>
            
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" :key="index" > 
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{item.name}}</span>
          </template>  
        </el-menu-item>
      </template>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { usePermissionStore } from "../../store/permission";
import { storeToRefs } from "pinia";

const permissionStore = usePermissionStore();
const menuData = storeToRefs(permissionStore).menuList;
const selectindex = ref("/home");
const handleOpen = (key: string, keyPath: string[]) => {
  selectindex.value = key
}

watch(() => permissionStore.menuList, (newv, oldv) => {
    if(newv.length > 0){
      selectindex.value = "/home"
    }
})

const menuData2 = [
  {
    id: 0,
    name:"首页",
    icon: 'HomeFilled',
    path:'/home'
  },
  {
    id: 1,
    name: "示例页面",
    icon:'HelpFilled',
    childNodes:[
      {
        id: 11,
        name:"表格页面",
        path:'/table'
      },
      {
        id: 12,
        name:"树表页面",
        path:'/treeTable'
      },
  
    ]
  },
  {
    id: 2,
    icon:'Share',
    name: "流程管理",
    childNodes:[
      {
        id: 21,
        name:"流程分类",
        path: '/flow/category'
      },
      {
        id: 22,
        name:"流程设计",
        path: '/flow/design'
      },
    ]
  },
  {
    id: 3,
    icon:'Promotion',
    name: "OA办公",
    childNodes:[
      {
        id: 31,
        name:"发起申请",
        path: '/flow/approval'
      },
      {
        id: 32,
        name:"我发起的",
        path: '/flow/my'
      },
      {
        id: 33,
        name:"待办任务",
        path: '/flow/todo'
      },
      {
        id: 34,
        name:"已办任务",
        path: '/flow/done'
      }
      
    ]
  },
  {
    id: 4,
    icon:'Tools',
    name: "系统管理",
    childNodes:[
      {
        id: 41,
        name:"用户管理",
        path: '/sys/user'
      },
      {
        id: 42,
        name:"角色管理",
        path: '/sys/role'
      },
      {
        id: 43,
        name:"菜单管理",
        path: '/sys/menu'
      }
      
    ]
  },
  {
    id: 5,
    icon:'View',
    name: "设计器",
    childNodes:[
      {
        id: 41,
        name:"表单设计",
        path: '/design/formcreate'
      }
    ]
  }
]

const isCollapse = ref(false);

</script>
